<template>
	<view>
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balancea">文章列表</text>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		<view class="headerBox">
			<view class="outerLayer">
				<view :class="{tabSonbox:index==num}" @click="qiehuan(item,index)" v-for="(item,index) in tabData" :key="index">
					<view class="tabfont">
						<view>
							{{item.class_name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="browseStatubox">
			<text :class="{outStyle:index==stylenum}" @click="qiehuana(item,index)" v-for="(item,index) in browseData" :key="index">
				<text class="browsFont">{{item.browseFont}}</text>
			</text>
		</view>
		<view class="main">
			<view class="commentBox" @click="godetail(index)" v-for="(item,index) in infoData" :key="index+'1'">
				<view class="headBox">
					<image class="photo" :src="item.member_avatar"></image>
					<text class="name">{{item.member_name}}</text>
					<text class="particularYear">{{item.create_time}}</text>
				</view>
				<view class="titleBox">
					{{item.title}}
				</view>
				<view class="contentBox">
					{{item.content}}
				</view>
				<view class="fotter">
					<view class="infoBox">
						<image class="infoimg" src="../../../static/prodtct/kefu.png" mode=""></image>
						<text class="plnum">{{item.commentnum}}</text>
					</view>
					<view class="easyBox">
						<image class="easyImg" src="../../../static/index/easy.png"></image>
						<text class="liulan">{{item.clicknum}}</text>
					</view>
				</view>
			</view>
		</view>
		<image class="fabuImg" src="/static/index/fabufeiji.png" @click="fabutxt"></image>
	</view>
</template>

<script>
	import Require from '../../../common/require.js';
	export default {
		data() {
			return {
				num: 0,
				stylenum: 0,
				tabData: [],
				browseData: [{
						browseFont: '浏览量'
					},
					{
						browseFont: '评论量'
					},
					{
						browseFont: '时间'
					}
				],
				infoData:[],
				class_id:''
			};
		},
		onLoad() {
			// this.qiehuan()
		},
		onShow(){
			  var self=this;
			  this.articleList();
			},
		methods: {
			articleList(){
				var self=this;
				Require.commonRequest({
					url:'/api/forum/categorylist',
					method:'POST',
					success: function(ret) {
						  if(ret.data.code==200){
								self.tabData=ret.data.data.categorylist;
								self.class_id=ret.data.data.categorylist[0].class_id
								self.qiehuan_get()
							  }
						},
						fail: function() {
							uni.showToast({
								icon: "none",
								title: "网络异常，请稍后再试"
							})
						}
					})
				},
			qiehuan(item, index) {
				var self=this;
				self.num = index;
				self.class_id=item.class_id
				self.qiehuan_get()
				
			},
			qiehuan_get(){
				var self=this;
				Require.commonRequest({
					url:'/api/forum/forumlist',
					data:{
						page:1,
						class_id:self.class_id,
						pagesize:999,
						sort:parseInt(self.stylenum)+1
					},
					method:'POST',
					success: function(ret) {
						  if(ret.data.code==200){
								self.infoData=ret.data.data.forumlist
								console.log(ret.data.data.forumlist)
								// console.log(ret.data.data.forumlist)
							  }
						},
						fail: function() {
							uni.showToast({
								icon: "none",
								title: "网络异常，请稍后再试"
							})
						}
					})
			},
			godetail(e){
				var self=this;
				uni.navigateTo({
					url:'./articleDetail?id='+self.infoData[e].forumid
				})
			},
			qiehuana(item, index) {
				var self=this
				self.stylenum = index
				console.log(self.stylenum)
				self.qiehuan_get()
			},
			fabutxt(){
				uni.navigateTo({
					url:"articlRrelease"
				})
			},
			back(){
				uni.navigateBack({})
				}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F1F1;
	}

	.balancea {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 26rpx;
		left: 315rpx;
	}

	.headerBox {
		width: 750rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F4F4F7;
	}

	.outerLayer {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
		 
	}

	.tabSonbox {
		border-bottom: 6rpx solid #7322D8;
		margin-bottom: 10rpx;
		font-weight: bold;
	}

	.tabfont {
		padding: 10rpx 15rpx;
		font-size: 30rpx;
	}

	.browseStatubox {
		width: 690rpx;
		height: 90rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.outStyle {
		font-weight: bold;
		color: #7322D8;
	}

	.browsFont {
		font-size: 28rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		
	}

	.main {
		width: 690rpx;
		margin-left: 30rpx;
	}

	.commentBox {
		width: 690rpx;
		height: 340rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 29rpx 1rpx rgba(11, 18, 21, 0.04);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.headBox {
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.photo {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-left: 30rpx;
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(46, 46, 46, 1);
		margin-left: 22rpx;
	}

	.particularYear {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		right: 30rpx;
	}

	.titleBox {
		width: 660rpx;
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
		padding-left: 30rpx;
	}

	.contentBox {
		width: 628rpx;
		height: 120rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(68, 68, 68, 1);
		line-height: 38rpx;
		margin-left: 31rpx;
		margin-top: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.fotter {
		width: 690rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		margin-top: 15rpx;

	}

	.infoBox {
		margin-left: 30rpx;
	}

	.infoimg {
		width: 26rpx;
		height: 26rpx;
	}

	.plnum {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		margin-left: 12rpx;
	}

	.easyBox {
		margin-left: 35rpx;
	}

	.easyImg {
		width: 30rpx;
		height: 20rpx;
	}

	.liulan {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		margin-left: 12rpx;
	}

	.fabuImg {
		width: 70rpx;
		height: 70rpx;
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
	}
</style>
